<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
    <link rel="stylesheet" href="./colorbutton.css">
    <link rel="stylesheet" href="./mianbuttom.css">
    <link rel="stylesheet" href="./xuanfu.css">
</head>

<body>
    <div id="xuanfu"></div>
    <div id="bodye"
        :style="'background-color: rgb('+app2miandiv_p_image_color[0]+','+app2miandiv_p_image_color[1]+','+app2miandiv_p_image_color[2]+');'+'height: '+bgclow+'px;'">
    </div>
    <div id="app">
        <!-- style="transform: translate3d(844px, 288px, 0px); opacity: 0; visibility: hidden;" -->
        <div class="xuanfu"
            :style="'transform: translate3d('+client[0]+'px, '+client[1]+'px, 0px); opacity: 1; visibility: inherit;'"
            v-if="xuanfupanding">
            <ol>
                <li v-for="(item_lizi, index_lizi) in lizi" :key="index_lizi" class="" v-bind:id="index_lizi">
                    <ol>
                        <li v-for="(item_lizi1, index_lizi1) in lizi[index_lizi]" :key="index_lizi1" class=""
                            v-bind:id="'a'+index_lizi1"></li>
                    </ol>
                </li>
            </ol>
        </div>
        <div class="app-image"></div>
        <div :class="nav" :style="navcolorimage" v-if="navshow">
            <p class="nav-name"><span style="color: rgb(83, 82, 82);">Easy to use</span> <span
                    style="color: rgb(83, 82, 82);">color mixing</span><br>
                <span style="color: rgb(83, 82, 82);"> website</span>
            </p>
            <div :class="navButton">
                <!-- :style="main" -->
                <button class='nav-button-chang' @click="changColor()" @mouseover="mouseoverchangColor()"
                    @mouseout="mouseoutchangColor()" :class="mouseoverchangColorstyle"><input type="text"
                        v-model="maincolorinput"></button>
                <button class="nav-button-buding" @click="budingColor()" @mouseover="mouseoverchangColor1()"
                    @mouseout="mouseoutchangColor1()" :class="mouseoutbudingColorstyle">Generates</button>
            </div>
        </div>
        <div class="main" v-if="show">
            <div class="main-ch">
                <ol class="main-ch-ol">
                    <div :class="mainColorBox">
                        <div :class="mainColorBoxDiv" @mouseover="mouseovermainColorBoxDiv()"
                            @mouseout="mouseoutmainColorBoxDiv()">
                            <div :class="mainColorBoxDivDiv">
                                <div>
                                    <p class="mainColorBoxDivDivp1" @click="clickmainColorBoxDivDivp1()">1</p>
                                    <p class="mainColorBoxDivDivp2" @click="clickmainColorBoxDivDivp2()">2</p>
                                    <p class="mainColorBoxDivDivp3" @click="clickmainColorBoxDivDivp3()">3</p>
                                    <p class="mainColorBoxDivDivp4" @click="clickmainColorBoxDivDivp4()">4</p>
                                </div>
                            </div>
                        </div>
                        <div :class="mainColorBoxDivB1[0]">

                            <div class="mainColorBoxDivB1-div">
                                <div class="mainColorBoxDivB1-div-nav">
                                    <p>诊断</p>
                                    <div></div>
                                </div>
                                <div class="mainColorBoxDivB1-div-main">
                                    <div>
                                        <div>
                                            <p>left-1</p>
                                        </div>
                                        <div>
                                            <p>left-2</p>
                                        </div>
                                        <div>
                                            <p>left-3</p>
                                        </div>
                                        <div>
                                            <p>left-4</p>
                                        </div>
                                    </div>
                                    <p>
                                        <span class="span-div0">热门</span>
                                        <span class="span-div1">
                                            <template>
                                                <div>
                                                    <div></div>
                                                    <p></p>
                                                </div>
                                            </template>
                                        </span>
                                        <span class="span-div2">
                                            <template>
                                                <div>
                                                    <div></div>
                                                    <p></p>
                                                </div>
                                            </template>
                                        </span>
                                        <span class="span-div3">
                                            <template>
                                                <div>
                                                    <div></div>
                                                    <p></p>
                                                </div>
                                            </template>
                                        </span>
                                    </p>
                                </div>
                                <div class="mainColorBoxDivB1-div-buttom"></div>
                            </div>
                        </div>
                        <div :class="mainColorBoxDivB1[1]">2222222</div>
                        <div :class="mainColorBoxDivB1[2]">3333333</div>
                        <div :class="mainColorBoxDivB1[3]">4444444</div>
                    </div>
                    <li v-for="(item, index) in li" :key="index" class="color" v-bind:id="index">
                        {{item}}
                        <div class="color-bgc">

                        </div>
                        <div class="color-kongzhi">
                            <button class="color-button">选择</button>
                            <div class="color-kongzhi_name" :style="main">{{countColor_name[index]}}</div>
                            <p v-for="(item_p, index_p) in li_p[index]" :key="index_p"
                                :style="color_li_p[index][index_p]">
                                <template>
                                    <div class="colorname">
                                        {{color_name[index][index_p]}}
                                    </div>
                                </template>
                            </p>
                        </div>
                    </li>
                </ol>
            </div>
        </div>
    </div>
    <div id="app2" v-if="show">
        <div class="app2-bgc"></div>
        <div>
            <div class="app2-nav">
                <div class="app2-nav-name">
                    <p>Choose a few common matching colors</p>
                </div>
                <p v-for="(item, index) in li" :key="index"></p>
            </div>
            <div class="app2-main">
                <div class="app2-main-jieshi">
                    <p>Click select transparent color system
                    </p>
                </div>
                <section>
                    <div @click="sectinoDiv1()"></div>
                    <div @click="sectinoDiv2()"></div>
                    <div @click="sectinoDiv3()"></div>
                    <div @click="sectinoDiv4()"></div>
                    <div @click="sectinoDiv5()"></div>
                    <div @click="sectinoDiv6()"></div>
                </section>
                <div id="app2-main-reight"></div>
                <div id="app2-main-bottom">
                    <p>You can choose the color scheme of the turntable above
                    </p>
                </div>
                <div v-for="(item_div, index_div) in li_div" :key="index_div" class="app2-mian-div"
                    :id="'app2-mian-div'+index_div">
                    <p v-for="(item_p, index_p) in li_p" :key="index_p" :style="app2miandiv_p[index_div][index_p]">
                        <span>
                            {{app2miandiv_p_colorname[index_div][index_p]}}
                        </span>
                    </p>
                </div>
            </div>
            <div class="app2-bottom">
                <p>Here is a list of common colors to choose from
                    <template>
                        <div>

                        </div>
                    </template>
                </p>
                <P>Continue sliding down
                    <template>
                        <div>

                        </div>
                    </template>
                </P>
                <P>Continue sliding down
                    <template>
                        <div
                            :style="app2_bottom_template[5]+'top:'+app2_bottom_template[0]+'px;left: '+app2_bottom_template[1]+'px;width: '+app2_bottom_template[2]+'px;height: '+app2_bottom_template[3]+'px;border-radius:'+app2_bottom_template[4]+'px;' ">
                        </div>
                    </template>
                </P>
                <div class="app2-bottom-div">
                    <div>
                        <p>Color & Bulid</p>
                        <p>Color & Bulid</p>
                        <p>" colour collocation" is to point to undertake collocation to colour, can obtain better
                            visual effect.
                            We match tonal, have 3 patterns basically: need to follow the principle that matches with
                            tonal collocation, similar color collocation, complementary color collocation.
                            The collocation of different material and colour and lustre clothes, also can have different
                            visual effect, find out the color department that suits itself most, achieve visual harmony
                            can.
                        </p>
                    </div>
                    <div>
                        <div class="app2-bottom-div-div1">
                            <ol>
                                <li v-for="(item, index) in li" :key="index" class="" v-bind:id="index"></li>
                            </ol>
                        </div>
                        <div class="app2-bottom-div-div2">
                            <ol>
                                <li v-for="(item, index) in li" :key="index" class="" v-bind:id="index"></li>
                            </ol>
                        </div>
                        <div class="app2-bottom-div-div3">
                            <ol>
                                <li v-for="(item, index) in li" :key="index" class="" v-bind:id="index"></li>
                            </ol>
                        </div>
                        <div class="app2-bottom-div-div4">
                            <ol>
                                <li v-for="(item, index) in li" :key="index" class="" v-bind:id="index"></li>
                            </ol>
                        </div>
                    </div>
                    <div class="app2-bottom-divlin-3"
                        :style="'position: '+app2_bottom_divlin_3[0]+';top: '+app2_bottom_divlin_3[1]+'px;left: '+app2_bottom_divlin_3[2]+'px;'">
                        <ul>
                            <li class="app2-bottom-divlin-3-1"
                                :style="'top: '+app2_bottom_divlin_3_1[0]+'px;left: '+app2_bottom_divlin_3_1[1]+'px;width: '+app2_bottom_divlin_3_1[2]+'px;height: '+app2_bottom_divlin_3_1[3]+'px;'">
                            </li>
                            <li class="app2-bottom-divlin-3-2"
                                :style="'top: '+app2_bottom_divlin_3_2[0]+'px;left: '+app2_bottom_divlin_3_2[1]+'px;width: '+app2_bottom_divlin_3_2[2]+'px;height: '+app2_bottom_divlin_3_2[3]+'px;'">
                            </li>
                            <li class="app2-bottom-divlin-3-3"
                                :style="'top: '+app2_bottom_divlin_3_3[0]+'px;left: '+app2_bottom_divlin_3_3[1]+'px;width: '+app2_bottom_divlin_3_3[2]+'px;height: '+app2_bottom_divlin_3_3[3]+'px;'">
                            </li>
                            <li class="app2-bottom-divlin-3-4"
                                :style="'top: '+app2_bottom_divlin_3_4[0]+'px;left: '+app2_bottom_divlin_3_4[1]+'px;width: '+app2_bottom_divlin_3_4[2]+'px;height: '+app2_bottom_divlin_3_4[3]+'px;'">
                            </li>
                            <li class="app2-bottom-divlin-3-5"
                                :style="'top: '+app2_bottom_divlin_3_5[0]+'px;left: '+app2_bottom_divlin_3_5[1]+'px;width: '+app2_bottom_divlin_3_5[2]+'px;height: '+app2_bottom_divlin_3_5[3]+'px;'">
                            </li>
                            <li class="app2-bottom-divlin-3-6"
                                :style="'top: '+app2_bottom_divlin_3_6[0]+'px;left: '+app2_bottom_divlin_3_6[1]+'px;width: '+app2_bottom_divlin_3_6[2]+'px;height: '+app2_bottom_divlin_3_6[3]+'px;'">
                            </li>
                            <li class="app2-bottom-divlin-3-7"
                                :style="'top: '+app2_bottom_divlin_3_7[0]+'px;left: '+app2_bottom_divlin_3_7[1]+'px;width: '+app2_bottom_divlin_3_7[2]+'px;height: '+app2_bottom_divlin_3_7[3]+'px;'">
                            </li>
                        </ul>
                    </div>
                    <div class="app2-bottom-divlin-4">
                        <p>Let's 11111111enjoy the beautiful colors
                        </p>

                        <ul>
                            <li class="app2-bottom-divlin-4-div1">
                                <div></div>
                                <p></p>
                            </li>
                            <li class="app2-bottom-divlin-4-div2">
                                <div></div>
                                <p></p>
                            </li>
                            <li class="app2-bottom-divlin-4-div3">
                                <div></div>
                                <p></p>
                            </li>
                            <li class="app2-bottom-divlin-4-div4">
                                <div></div>
                                <p></p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- <script src="https://unpkg.com/vue@next"></script> -->
    <script src="vue.js"></script>
    <script src="./color.js"></script>
    <script src="./index.js"></script>
    <script src="./buttom.js"></script>
    <script>

    </script>
    <script src="./jQuery-min.js"></script>
</body>

</html>